<template>
  <section class="pt-120 pb-110 bg-2">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="section-title text-center">
            <h2>工作室沿革</h2>
          </div>
          <div class="testimonial-author-comment text-center">
            <div class="author-comment-carousel">
              <swiper :options="swiperOptions">
                <swiper-slide v-for="item in historyList" :key="item.id">
                  <div class="single-author-comment">
                    <p style="font-size: 24px;margin-bottom: 50px">{{ item.title }}</p>
                    <h4 style="font-size: 20px!important; line-height: 30px">{{ item.itsHistory }}</h4>
                  </div>
                </swiper-slide>

              </swiper>
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import {Api} from "~/request/Api";

export default {
  name: "Testimonial",
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data() {
    return {
      historyList: [],
      swiperOptions: {
        slidesPerView: 1,
        loop: true,
        speed: 1000,
        spaceBetween: 30,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  methods: {
    async getHistoryInfo() {
      let result = await Api.getHistoryInfo()
      let res = result.data.HistoryInfo.History
      if (result.code === 200) {
        this.historyList = res
        console.log(this.historyList, "工作室沿革")
      }
    }
  },
  mounted() {
    this.getHistoryInfo()
  }
}
</script>

<style scoped>

</style>
